<template>
	<!-- 会员中心 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m001}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="myMember px-3 flex align-center A-Regular ml-3 mt-6" :class="model=='light'?'myMemberLight':''">
			<view class="flex-1 flex align-center">
				<view class="mr-2">
					{{i18n.m002}}
				</view>
				<view class="f0">
					<image style="width: 32rpx;height: 32rpx;" :src="'/static/images/mine/4_'+model+'.png'" mode=""></image>
				</view>
				<view class="vip">
					{{vipClass}}
				</view>
			</view>
			<view v-if="vipClass=='VIP0'" class="">
				{{i18n3.t074}}
			</view>
			<view v-else class="">
				{{i18n.m003}}{{dayNum}}{{i18n.m008}}
			</view>
		</view>
		<!-- 即可成为会员 -->
		<view class="flex align-center">
			<view class="doVip A-Heavy flex align-end pr-2 pb-1 pl-3" :class="model=='light'?'doVipLight':''">
				{{i18n.m005}}
			</view>
			<view class="">
				
			</view>
		</view>
		<view class="doVipDesc ml-3">
			{{i18n.m006}}
		</view>
		<!-- 套餐 -->
		<view class="ml-3 mt-6 listTitle A-Medium" :class="model=='light'?'listTitleLight':''">
			{{i18n.m007}}
		</view>
		<view v-if="list.length!=0" class="list A-Medium flex mx-3 align-center justify-between" :class="model=='light'?'listLight':''">
			<view :class="listIndex==1?'item1':'item'" @click="changeListIndex(1)">
				<view class="icon flex align-center justify-center">
					{{list[1].membershipLevel}}
				</view>
				<view class="day">
					{{list[1].membershipDays}}{{i18n.m008}}
				</view>
				<view class="price flex align-end">
					<view class="mb-1" style="font-size: 28rpx;">
						$
					</view>
					<view class="">
						{{list[1].membershipFee}}
					</view>
				</view>
			</view>
			<view :class="listIndex==2?'item1':'item'" @click="changeListIndex(2)">
				<view class="icon flex align-center justify-center">
					{{list[2].membershipLevel}}
				</view>
				<view class="day">
					{{list[2].membershipDays}}{{i18n.m008}}
				</view>
				<view class="price flex align-end">
					<view class="mb-1" style="font-size: 28rpx;">
						$
					</view>
					<view class="">
						{{list[2].membershipFee}}
					</view>
				</view>
			</view>
			<view :class="listIndex==3?'item1':'item'" @click="changeListIndex(3)">
				<view class="icon flex align-center justify-center">
					{{list[3].membershipLevel}}
				</view>
				<view class="day">
					{{list[3].membershipDays}}{{i18n.m008}}
				</view>
				<view class="price flex align-end">
					<view class="mb-1" style="font-size: 28rpx;">
						$
					</view>
					<view class="">
						{{list[3].membershipFee}}
					</view>
				</view>
			</view>
		</view>
		<!-- 特权 -->
		<view class="ml-3 mb-3 mt-6 listTitle A-Medium" :class="model=='light'?'listTitleLight':''">
			{{i18n.m009}}
		</view>
		<view v-if="list.length!=0" class="tqWrap mb-3 mx-3" :class="model=='light'?'tqWrapLight':''">
			<view class="flex align-center" style="margin-bottom: 12rpx;">
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/2.png" mode="widthFix"></image>
				</view>
				<view class="tqWrapTitle">
					{{list[0].membershipLevel}}
				</view>
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/3.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex" style="overflow-x: scroll;">
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[0].arbitrageOrderProcesstime}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m010}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[0].arbitrageTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m011}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[0].btcSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m012}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[0].ethSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m013}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[0].optionTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m014}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[0].withdrawalFee}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m015}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="list.length!=0" class="tqWrap mb-3 mx-3" :class="model=='light'?'tqWrapLight':''">
			<view class="flex align-center" style="margin-bottom: 12rpx;">
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/4.png" mode="widthFix"></image>
				</view>
				<view class="tqWrapTitle2">
					{{list[1].membershipLevel}}
				</view>
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/5.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex" style="overflow-x: scroll;">
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[1].arbitrageOrderProcesstime}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m010}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[1].arbitrageTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m011}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[1].btcSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m012}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[1].ethSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m013}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[1].optionTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m014}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[1].withdrawalFee}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m015}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="list.length!=0" class="tqWrap mb-3 mx-3" :class="model=='light'?'tqWrapLight':''">
			<view class="flex align-center" style="margin-bottom: 12rpx;">
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/4.png" mode="widthFix"></image>
				</view>
				<view class="tqWrapTitle2">
					{{list[2].membershipLevel}}
				</view>
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/5.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex" style="overflow-x: scroll;">
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[2].arbitrageOrderProcesstime}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m010}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[2].arbitrageTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m011}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[2].btcSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m012}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[2].ethSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m013}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[2].optionTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m014}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[2].withdrawalFee}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m015}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="list.length!=0" class="tqWrap mx-3" :class="model=='light'?'tqWrapLight':''">
			<view class="flex align-center" style="margin-bottom: 12rpx;">
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/4.png" mode="widthFix"></image>
				</view>
				<view class="tqWrapTitle2">
					{{list[3].membershipLevel}}
				</view>
				<view class="f0">
					<image style="width: 295rpx;" src="/static/images/member/5.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex" style="overflow-x: scroll;">
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[3].arbitrageOrderProcesstime}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m010}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[3].arbitrageTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m011}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[3].btcSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m012}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[3].ethSpotTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m013}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[3].optionTradeCount}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m014}}
					</view>
				</view>
				<view style="width: 180rpx;flex-shrink: 0;" class="flex mr-2 flex-column align-center">
					<view class="list1 text-alignC A-Medium">
						{{list[3].withdrawalFee}}
					</view>
					<view class="list2 text-alignC A-Regular">
						{{i18n.m015}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">
			
		</view>
		<view class="btnWrap" :class="model=='light'?'btnWrapLight':''">
			<view @click="submit" class="btn flex align-center justify-center A-Medium ml-3 mt-2">
				${{price}}{{i18n.m016}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		membershipLevelList
	} from '@/core/api/index.js';
	import {
		membershipLevelOpen
	} from '@/core/api/user.js';
	export default {
		data() {
			return {
				pageNo:1,
				pageSize:10,
				list:[],
				price:'',
				listIndex:1,
				// vipClass:uni.getStorageSync('vipClass'),
				// vipEndTime:uni.getStorageSync('vipEndTime'),
				dayNum:'',
			}
		},
		onLoad() {
			this.getMembershipLevelList();
			if(this.vipClass!="VIP0"){
				this.daysUntilFutureDate(this.vipEndTime);
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			vipClass() {
				return this.$store.state.config.vipClass;
			},
			vipEndTime() {
				return this.$store.state.config.vipEndTime;
			},
			i18n() {
				return this.$t('member');
			},
			i18n2(){
				return this.$t('showToast');
			},
			i18n3(){
				return this.$t('trade');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		methods: {
			submit(){
				membershipLevelOpen({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					membershipLevel:this.list[this.listIndex].membershipLevel
				}).then(res=>{
					console.log(res,'cs');
					this.$tool.showToast(this.i18n2.st033);
					this.$store.dispatch('config/getCustomerInfo');
					setTimeout(res=>{
						this.$tool.navTo('/pages/index/index',4)
					},800)
				})
			},
			getMembershipLevelList(){
				membershipLevelList({
					pageNo:this.pageNo,
					pageSize:this.pageSize,
				}).then(res=>{
					this.list = res.result.records;
					for(let i=0;i<this.list.length;i++){
						this.list[i].membershipFee = this.list[i].membershipFee.replace('美金','')
					}
					this.price = this.list[1].membershipFee;
				})
			},
			changeListIndex(e){
				this.listIndex = e;
				this.price = this.list[e].membershipFee;
			},
			daysUntilFutureDate(futureDateString) {
			    const futureDate = new Date(futureDateString);
			    if (isNaN(futureDate.getTime())) {
			        console.error('Invalid date string provided.');
			        return;
			    }
			
			    const currentDate = new Date();
			    const timeDifference = futureDate - currentDate;
			
			    const daysRemaining = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
			
			    this.dayNum = daysRemaining;
			}
		}
	}
</script>

<style scoped lang="scss">
	.myMember {
		width: 690rpx;
		height: 80rpx;
		background: rgba(255,180,31,0.1);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid rgba(255,180,31,0.3);
		opacity: .4;
		font-size: 24rpx;
		color: #7F838D;
		.vip {
			font-size: 27rpx;
			color: #FFB41F;
		}
	}
	.myMemberLight {
		background: #FFB41F;
		border: none;
		opacity: 1;
		color: #FFFFFF;
		.vip {
			color: #FFFFFF;
		}
	}
	.doVip {
		height: 74rpx;
		background: url(/static/images/member/1.png);
		background-repeat: no-repeat;
		background-size: auto 74rpx;
		background-position: right bottom;
		font-size: 40rpx;
		color: #F7F7F7;
		margin-top: 46rpx;
	}
	.doVipLight {
		color: #0E0F11;
	}
	.doVipDesc {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #7F838D;
	}
	.listTitle {
		font-size: 32rpx;
		color: #F7F7F7;
	}
	.listTitleLight {
		color: #0E0F11;
	}
	
	.list {
		margin-top: 52rpx;
		.item {
			position: relative;
			width: 210rpx;
			height: 258rpx;
			background: #16181C;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid rgba(255,180,31,0.2);
			.icon {
				width: 118rpx;
				height: 54rpx;
				background: #FFB41F;
				border-radius: 27rpx 27rpx 27rpx 0rpx;
				font-size: 28rpx;
				color: #0E0F11;
				position: absolute;
				top: -27rpx;
			}
			.day {
				font-size: 32rpx;
				color: #AAACB8;
				margin-left: 24rpx;
				margin-top: 76rpx;
			}
			.price {
				font-size: 56rpx;
				color: #AAACB8;
				margin-left: 24rpx;
				margin-top: 22rpx;
			}
		}
		.item1 {
			position: relative;
			width: 210rpx;
			height: 258rpx;
			background: linear-gradient( 152deg, rgba(255,180,31,0) 0%, rgba(255,180,31,0.2) 100%);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid rgba(255,180,31,0.8);
			.icon {
				width: 118rpx;
				height: 54rpx;
				background: #FFB41F;
				border-radius: 27rpx 27rpx 27rpx 0rpx;
				font-size: 28rpx;
				color: #0E0F11;
				position: absolute;
				top: -27rpx;
			}
			.day {
				font-size: 32rpx;
				color: #F7F7F7;
				margin-left: 24rpx;
				margin-top: 76rpx;
			}
			.price {
				font-size: 56rpx;
				color: #F7F7F7;
				margin-left: 24rpx;
				margin-top: 22rpx;
			}
		}
	}
	.listLight {
		
		.item {
			border: none;
			background: #fff;
			.day {
				color: #0E0F11;
			}
			.price {
				color: #FFB41F;
			}
		}
		.item1 {
			.day {
				color: #0E0F11;
			}
			.price {
				color: #FFB41F;
			}
		}
	}
	.tqWrap {
		width: 690rpx;
		// height: 208rpx;
		padding-bottom: 20rpx;
		background: #16181C;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid #1F2128;
		padding-top: 14rpx;
		padding-bottom: 20rpx;
		.tqWrapTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin: 0 16rpx;
		}
		.tqWrapTitle2 {
			font-size: 28rpx;
			color: #FFB41F;
			margin: 0 16rpx;
		}
		.list1 {
			margin: 0 16rpx;
			font-size: 36rpx;
			color: #F7F7F7;
			view {
				flex-shrink: 0;
			}
		}
		.list2 {
			margin: 0 16rpx;
			margin-top: 4rpx;
			font-size: 24rpx;
			color: #7F838D;
			view {
				flex-shrink: 0;
			}
		}
	}
	.tqWrapLight {
		background: #fff;
		border: none;
		.list1 {
			color: #47474A;
		}
		.list2 {
			color: #B5B7BF;
		}
	}
	.btnWrap {
		width: 750rpx;
		height: 176rpx;
		background: #0E0F11;
		position: fixed;
		bottom: 0;
		.btn {
			width: 690rpx;
			height: 84rpx;
			background: #FFB41F;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-size: 36rpx;
			color: #0E0F11;
		}
	}
	.btnWrapLight {
		background: #fff;
	}
</style>